<template xmlns="http://www.w3.org/1999/html">
<div id="app">
  <el-card
      style="width: 100%;">
    <div slot="header" class="clearfix">
      <span>电气</span>
      <el-button type="text" style="float: right; padding: 3px 0" @click="drawer = true">查看评审</el-button>
    </div>
    <el-descriptions class="margin-top" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          负责人
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item span="2">
        <template slot="label">
          <i class="el-icon-user"></i>
          协作人
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-alarm-clock"></i>
          开始日期
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-alarm-clock"></i>
          计划完成日期
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-alarm-clock"></i>
          实际完成日期
        </template>
        <el-input></el-input>
      </el-descriptions-item>
      <el-descriptions-item span="3">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          工作内容和要求
        </template>
        <el-input></el-input>
      </el-descriptions-item>

      <el-descriptions-item span="2">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          附件
        </template>
        <el-button type="text">上传</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-card>
    <div slot="header" class="clearfix"><span>过程</span></div>
    <el-card class="box-card" v-for="(card, cardIndex) in cards" :key="cardIndex" shadow="never">
      <div slot="header" class="clearfix">
        <span>{{ card.title }}</span>
        <el-button type="text" style="float: right; padding: 3px 0" @click="showComment = !showComment">查看评论
        </el-button>
        <el-button type="text" style="float: right; padding: 3px 0">提交</el-button>
        <el-button v-if="cardIndex !== 0" style="float: right; padding: 3px 0" type="text"
                   @click="removeCard(cardIndex)">删除此节点
        </el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addSubTask()">创建子任务</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click='alert("发起当前节点评审")'>发起评审</el-button>
      </div>
      <el-form ref="form" :model="schemeForm" label-width="120px">
        <el-row>
          <el-col :span="16">
            <el-form-item label="工作内容和要求">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item>
              <el-upload>
                <el-button type="text"><i class="el-icon-upload">附件</i></el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="负责人">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划完成日期">
              <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际完成日期">
              <el-date-picker
                  v-model="value2"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item v-if="showComment">
              <el-timeline style="border:1px solid #cecece; padding: 20px; padding-bottom: 0;">
                <el-timeline-item v-for="(comment, index) in comments" :key="index" :timestamp="comment.timestamp"
                                  placement="top">
                  <el-card shadow="never">
                    <span>{{ comment.author }}</span><span>:</span><h4 style="display: inline; padding:0  40px">
                    {{ comment.content }}</h4><i class="el-icon-paperclip" style="color: #409eff">**客户**需求.pdf</i>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <el-button type="text" @click="showCommentDailog = true">评论</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-card v-for="(subTask, index) in subTasks" :key="index" shadow="never">
                <div slot="header" class="clearfix">
                  <span>{{ subTask.title }}</span>
                  <el-button type="text" style="float: right; padding: 3px 0"
                             @click="showSubComment = !showSubComment">
                    查看评论
                  </el-button>
                  <el-button type="text" style="float: right; padding: 3px 0">提交</el-button>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="removeSubTask(index)">删除此任务
                  </el-button>
                  <el-button style="float: right; padding: 3px 0" type="text" @click='alert("发起当前节点评审")'>发起评审
                  </el-button>
                </div>
                <el-form ref="form" :model="schemeSubForm" label-width="120px" size="mini">
                  <el-form-item label="工作内容和要求">
                    <el-input></el-input>
                  </el-form-item>
                  <el-form-item label="负责人">
                    <el-input style="width: 35%"></el-input>
                  </el-form-item>
                  <el-form-item label="计划完成日期">
                    <el-date-picker
                        v-model="value3"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="实际完成日期">
                    <el-date-picker
                        v-model="value4"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="showSubComment">
                    <el-timeline style="border:1px solid #cecece; padding: 20px; padding-bottom: 0;">
                      <el-timeline-item v-for="(comment, index) in subComments" :key="index"
                                        :timestamp="comment.timestamp"
                                        placement="top">
                        <el-card shadow="never">
                          <span>{{ comment.author }}</span><span>:</span><h4
                            style="display: inline; padding-left: 20px">
                          {{ comment.content }}</h4>
                        </el-card>
                      </el-timeline-item>
                    </el-timeline>
                    <el-button type="text" @click="showSubCommentDailog = true">评论</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-drawer
          title="评审标题(展示此页面所有节点、子节点中的评审信息)"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose">
        <el-card class="box-card" style="margin: 20px 0">
          <el-descriptions title="方案评审" class="margin-top" direction="vertical" :column="2" border>
            <el-descriptions-item label="评审人员">张三、李四</el-descriptions-item>
            <el-descriptions-item label="评审原件">文件附件</el-descriptions-item>
            <el-descriptions-item label="评审意见">部分修改</el-descriptions-item>
            <el-descriptions-item label="评审结果">
              <el-tag size="small">通过</el-tag>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="评审标题（来源于自定义节点中的评审）" class="margin-top" direction="vertical" :column="2" border
                           style="margin-top: 30px">
            <el-descriptions-item label="评审人员">王五、赵六</el-descriptions-item>
            <el-descriptions-item label="评审原件">文件附件</el-descriptions-item>
            <el-descriptions-item label="评审意见">部分修改</el-descriptions-item>
            <el-descriptions-item label="评审结果">
              <el-tag size="small">修改</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-drawer>
      <el-dialog :visible.sync="showCommentDailog" title="发表评论">
        <el-form ref="commentForm" :model="commentForm">
          <el-form-item label="评论内容">
            <el-input v-model="commentForm.content">
              <el-button slot="append"><i class="el-icon-picture-outline"></i></el-button>
              <el-button slot="append"><i class="el-icon-paperclip"></i></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="showCommentDailog=false" type="warning">取消</el-button>
              <el-button @click="submitComment()" type="primary">发表</el-button>
          </span>
      </el-dialog>
      <el-dialog :visible.sync="showSubCommentDailog" title="发表评论">
        <el-form ref="subCommentForm" :model="subCommentForm">
          <el-form-item label="评论内容">
            <el-input v-model="subCommentForm.content"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="showSubCommentDailog=false" type="warning">取消</el-button>
              <el-button @click="submitSubComment()" type="primary">发表</el-button>
          </span>
      </el-dialog>
    </el-card>
    <el-button @click="showAddNodeDialog" type="primary" size="small">创建节点</el-button>
    <el-input v-model="newCardTitle" placeholder="请输入新电气工作节点标题" style="width: 35%" size="small"></el-input>
  </el-card>

  <el-card class="box-card" style="margin-top: 20px">
    <div slot="header" class="clearfix">
      <span>投产</span>
      <el-button style="float: right; padding: 3px 0" type="text">提交</el-button>
    </div>
    <el-descriptions class="margin-top" :column="2" border>

      <el-descriptions-item :span="2">
        <template slot="label">
          电气订货明细
        </template>
        <el-upload>
          <el-button type="text"><i class="el-icon-paperclip"></i></el-button><span>电气外购清单.clx,&nbsp;&nbsp;&nbsp;&nbsp;电气订货图.rar</span>
        </el-upload>
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template slot="label">
          电气投产树形结构图
        </template>
        <template>
          <div class="custom-transfer">
            <div class="transfer-panel">
              <el-tree
                  :data="sourceData"
                  show-checkbox
                  node-key="id"
                  :props="defaultProps"
                  ref="sourceTree"
                  @check="handleSourceCheck">
              </el-tree>
            </div>
            <div class="transfer-operations">
              <el-button @click="transferToTarget" :disabled="!selectedSourceKeys.length">>></el-button>
              <el-button @click="transferToSource" :disabled="!selectedTargetKeys.length"><<</el-button>
            </div>
            <div class="transfer-panel">
              <el-tree
                  :data="targetData"
                  show-checkbox
                  node-key="id"
                  :props="defaultProps" default-expand-all="true"
                  ref="targetTree"
                  @check="handleTargetCheck">
              </el-tree>
            </div>
          </div>
        </template>
      </el-descriptions-item>

      <el-descriptions-item style="padding: 20px">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          审批信息
        </template>
        <el-steps :active="2" style="margin: 20px">
          <el-step title="电气负责人" description="李四"></el-step>
          <el-step title="部门经理" description="王五"></el-step>
          <el-step title="设备部经理" description="张三"></el-step>
          <el-step title="总经理" description="胡八"></el-step>
          <el-step title="其他人员" description="ABC"></el-step>
        </el-steps>
        <el-timeline style="border:1px solid #cecece; margin: 20px; padding: 20px; padding-bottom: 0;">
          <el-timeline-item v-for="(comment, index) in comments" :key="index" :timestamp="comment.timestamp"
                            placement="top">
            <el-card shadow="never">
              <span>{{ comment.author }}</span><span>:</span><h4 style="display: inline; padding:0  40px">
              {{ comment.content }}</h4><i class="el-icon-paperclip" style="color: #409eff">一些说明.docx</i>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <el-button type="text" @click="showCommentDailog = true">发表评论</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-card class="box-card" style="margin: 20px 0px 100px 0px">
    <div slot="header" class="clearfix">
      <span>电气更改</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="dialogChangeVisible=true">增加</el-button>
      <el-button style="float: right; padding: 3px 0" @click="removeChanges(index)" type="text">删除</el-button>
    </div>
    <el-table :data="tableChangesData" stripe="true" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-descriptions :column="2" border>
            <el-descriptions-item>
              <template slot="label">更改内容及原因</template>
              {{ scope.row.content }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">审批进度</template>
              <el-steps :active="2">
                <el-step title="电气负责人" description="李四"></el-step>
                <el-step title="部门经理" description="王五"></el-step>
                <el-step title="设备部经理" description="张三"></el-step>
                <el-step title="总经理" description="胡八"></el-step>
                <el-step title="其他人员" description="ABC"></el-step>
              </el-steps>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">评论信息</template>
              <el-timeline style="padding: 20px; padding-bottom: 0;">
                <el-timeline-item v-for="(comment, index) in comments" :key="index" :timestamp="comment.timestamp"
                                  placement="top">
                  <el-card shadow="never">
                    <span>{{ comment.author }}</span><span>:</span><h4 style="display: inline; padding:0  40px">
                    {{ comment.content }}</h4><i class="el-icon-paperclip" style="color: #409eff">**客户**需求.pdf</i>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <el-button type="text" @click="showCommentDailog = true">评论</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column label="零件名称" prop="id">
      </el-table-column>
      <el-table-column label="型号" prop="desc">
      </el-table-column>
      <el-table-column label="时间" prop="time">
      </el-table-column>
      <el-table-column label="订货图" prop="file">
      </el-table-column>
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog title="新增图纸更改" :visible.sync="dialogChangeVisible">
    <el-form label-width="120px" :model="changesForm" label-position="left" size="small" :inline="true"
             class="demo-form-inline" v-for="(item, index) in changesForm" :key="index" style="margin: 20px 0">
      <el-form-item label="零件名称">
        <el-input v-model="changesForm.part"></el-input>
      </el-form-item>
      <el-form-item label="图号">
        <el-input v-model="changesForm.sn"></el-input>
      </el-form-item>
      <el-form-item label="图纸负责人">
        <el-input v-model="changesForm.head"></el-input>
      </el-form-item>
      <el-form-item label="时间">
        <el-input v-model="changesForm.time"></el-input>
      </el-form-item>
      <el-form-item label="更改内容及原因">
        <el-input v-model="changesForm.content"></el-input>
      </el-form-item>
      <el-form-item label="文件">
        <el-upload>
          <el-button type="text"><i class="el-icon-check"></i>上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addChanges()" type="primary" size="small">继续添加</el-button>
      <el-button @click="submitChanges()" type="primary" size="small">提交</el-button>
    </div>
  </el-dialog>
  <el-button type="success" @click="onSubmit()">完成</el-button>
</div>
</template>

<script>
export default {
  name: "DesiginView",
  data() {
    return {
      labelPosition: 'left',
      newCardTitle: '',
      showComment: true,
      showCommentDailog: false,
      showSubComment: true,
      showSubCommentDailog: false,
      schemeForm: {},
      schemeSubForm: {},
      subTasks: [], // 子任务数组
      nextSubTaskId: 1,// 用于生成子任务的ID，确保key的唯一性
      comments: [{content: '示例评论内容', timestamp: '2024/3/4 8:56\n', author: '郭俊山'}],
      subComments: [{content: '子任务中的示例评论内容', timestamp: '2024/3/4 8:56\n', author: '郭俊山'}],
      commentForm: {content: '', timestamp: '', author: '当前用户'},
      subCommentForm: {content: '', timestamp: '', author: '张三'},
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      cards: [{title: '1.电气方案'}],
      drawer: false,
      direction: 'rtl',
      reviewForm: {},
      changesForm: [{}],
      tableChangesData: [
        {
          id: '主轴电机',  desc: '张三', file: '订货图', time: '2024/04/09',
          content: '客户需求更改', step: '部门经理审核'
        }, {
          id: '控制系统', desc: '李四', file: '订货图', time: '2024/04/23',
          content: '客户要求', step: '总经理审批'
        }],
      dialogChangeVisible: false,

      sourceData: [
        {
          id: 1,
          label: "赛福斯特电气部分选型库",
          children: [
            {
              id: 2,
              label: "电机",
              children: [
                {
                  id: 4,
                  label: "西门子",
                  children: [
                    {
                      id: 11,
                      label: "行星减速机",
                      children: [
                        {
                          id: 13,
                          label: "APM050-2500",
                        },
                        {
                          id: 14,
                          label: "APM050-2300",
                        },
                        {
                          id: 15,
                          label: "DM50-2500",
                        },
                      ]
                    },
                    {
                      id: 12,
                      label: "减速机",
                      children: [
                        {
                          id: 16,
                          label: "BDM1120-3000",
                        },
                        {
                          id: 17,
                          label: "BD1120-3000",
                        },
                      ]
                    },
                  ]
                },
                {
                  id: 5,
                  label: "倍福",
                  children: [
                    {
                      id: 18,
                      label: "行星减速机",
                    },
                    {
                      id: 19,
                      label: "减速机",
                    },
                  ]
                },
                {
                  id: 6,
                  label: "APEC",
                  children: []
                },
                {
                  id: 7,
                  label: "ABC品牌",
                  children: []
                },
              ] // 可以根据需要添加更多节点或留空
            },
            {
              id: 3,
              label: "控制系统",
              children: [
                {
                  id: 8,
                  label: "西门子",
                  children: [
                    {
                      id: 20,
                      label: "820",
                    },
                    {
                      id: 21,
                      label: "830",
                    },
                    {
                      id: 22,
                      label: "800",
                    },
                  ]
                },
                {
                  id: 9,
                  label: "倍福",
                  children: []
                },
                {
                  id: 10,
                  label: "KUKA",
                  children: []
                },
              ] // 可以根据需要添加更多节点或留空
            }
          ]
        }
      ],
      targetData: [
        // 初始目标树形数据，可能初始为空
      ],
      selectedSourceKeys: [],
      selectedTargetKeys: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    addSubTask() {
      // 添加子任务
      this.subTasks.push({
        id: this.nextSubTaskId++,
        title: `子任务 ${this.nextSubTaskId}`
      });
    },
    removeSubTask(index) {
      // 根据索引删除子任务
      this.subTasks.splice(index, 1);
    },
    showAddNodeDialog() {
      const newCard = {
        title: this.newCardTitle,
        schemeForm: {},
        subTasks: [],
      };
      this.cards.push(newCard);
    },
    removeCard(index) {
      // 从cards数组中移除指定索引的卡片
      this.cards.splice(index, 1);
    },
    addChanges() {
      // 假设productionForm是一个数组，每个元素对应一个表单项
      this.changesForm.push({});
    },
    removeChanges(index) {
      this.changesForm.splice(index, 1);
    },
    submitChanges() {
      // 假设changesForm是一个对象，而不是数组，因为你的表单似乎是单个对象
      // 如果changesForm实际上是一个数组，你可能需要调整这里的逻辑
      // 直接将表单数据添加到tableChangesData数组中
      this.tableChangesData.push({
        id: this.changesForm.part, // 假设part字段是零件名称
        name: this.changesForm.sn, // 假设sn字段是图号
        desc: this.changesForm.head, // 假设head字段是图纸负责人
        time: this.changesForm.time, // 时间
        content: this.changesForm.content, // 更改内容及原因
        file: '文件链接', // 假设你有一个方式来处理文件上传并获取链接
        step: '初始审批' // 假设这是新增项的默认审批进度
      });

      // 清空表单以便下一次添加
      this.changesForm = {};

      // 关闭对话框
      this.dialogChangeVisible = false;
    },
    submitComment() {
      const now = new Date();
      this.commentForm.timestamp = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
      this.comments.push({...this.commentForm}); // 添加评论到时间线
      this.commentForm.content = ''; // 重置评论内容
      this.showCommentDailog = false; // 关闭对话框
    },
    submitSubComment() {
      const now = new Date();
      this.subCommentForm.timestamp = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
      this.subComments.push({...this.subCommentForm}); // 添加评论到时间线
      this.subCommentForm.content = ''; // 重置评论内容
      this.showSubCommentDailog = false; // 关闭对话框
    },
    handleSourceCheck(checkedKeys) {
      this.selectedSourceKeys = checkedKeys;
    },
    handleTargetCheck(checkedKeys) {
      this.selectedTargetKeys = checkedKeys;
    },
    transferToTarget() {
      const selectedNodes = this.getSelectedNodes(this.sourceData, this.selectedSourceKeys);
      this.targetData = [...this.targetData, ...selectedNodes];
      this.sourceData = this.removeSelectedNodes(this.sourceData, this.selectedSourceKeys);
      this.selectedSourceKeys = [];
    },
    transferToSource() {
      const selectedNodes = this.getSelectedNodes(this.targetData, this.selectedTargetKeys);
      this.sourceData = [...this.sourceData, ...selectedNodes];
      this.targetData = this.removeSelectedNodes(this.targetData, this.selectedTargetKeys);
      this.selectedTargetKeys = [];
    },
    getSelectedNodes(data, selectedKeys) {
      let selectedNodes = [];
      const findNodes = (nodes) => {
        nodes.forEach(node => {
          if (selectedKeys.includes(node.id)) {
            selectedNodes.push(node);
          }
          if (node.children) {
            findNodes(node.children);
          }
        });
      };
      findNodes(data);
      return selectedNodes;
    },
    removeSelectedNodes(data, selectedKeys) {
      const filterNodes = (nodes) => {
        return nodes.reduce((acc, node) => {
          if (!selectedKeys.includes(node.id)) {
            if (node.children) {
              node.children = filterNodes(node.children);
            }
            acc.push(node);
          }
          return acc;
        }, []);
      };
      return filterNodes(data);
    },
    onSubmit() {
      window.location.href = 'Manu'
    },
  },
}
</script>

<style scoped>
.el-divider {
  margin: 35px auto;
}
.el-divider span {
  font-size: 17px;
  font-weight: 100;
  color: #000;
}
.el-button {
  margin: 0 10px;
}
.custom-transfer {
  display: flex;
  justify-content: space-around; align-items: center;
  width: 100%;
  height: auto;
}
.transfer-panel {
  width: 400px; height: auto;  border: 1px solid #cecece;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-tree{
  margin: 20px auto; width: 100%; height: auto;
}
</style>